
<script>
import {h} from 'vue'
export default {
  name: 'XtxBread',
  render(){
      /*
      render:h=>h(APP)
      render(h){
          h:createElement(标签名(组件),{属性配置},[子集虚拟dom])
          return h(APP)
      }
      */
    //  console.log('slot',this.$slots.default());
     //最后意向不要i标签,其他项最后都要
     //获取当前组件的所有默认插件的子集数组(虚拟dom)
      const _childrenArr=this.$slots.default()
      const _temp=[]
    //   将子集循环
      _childrenArr.forEach((item,index)=>{
        //   最后一项不要i标签,其他项最后都要
        // 如果当前虚拟dom不是最后一项,就添加i箭头标签
          _temp.push(item)
          if (index!==_childrenArr.length-1) {
              //创建虚拟dom时i标签并添加到新数组
              _temp.push(h('i',{class:'iconfont icon-angle-right'}))
          }
      })
    //   return什么虚拟dom就渲染什么dom
      return h('div',{class:'xtx-bread'},_temp)
  }
}
</script>

// 去掉scoped全局作用
<style scoped lang="less">
.xtx-bread {
  display: flex;
  padding: 25px 10px;
  &-item {
    a {
      color: #666;
      transition: all 0.4s;
      &:hover {
        color: @xtxColor;
      }
    }
  }
  i {
    font-size: 12px;
    margin-left: 5px;
    margin-right: 5px;
    line-height: 22px;
  }
}
</style>
